<template>
  <div class="page">
    <!-- 表单 -->

    <a-card>
      <com-vxe-table
        :columns="columns"
        :axios="page"
        :fromItem="fromItem"
        :formData="formData"
        :initialize="initialize"
        @check-view="checkView"
        ref="xTable"
      >
        <template #button="data">
          <vxe-button
            status="primary"
            content="导出数据"
            @click="download(data)"
          ></vxe-button>
        </template>
        <template #operate="data">
          <div>
            <vxe-button
              title="查看"
              status="primary"
              content="查看"
              @click="data.callback(data.row)"
            ></vxe-button>
          </div>
        </template>
      </com-vxe-table>
    </a-card>
    <year-model ref="model" width="75vw" height="75vh">
      <template #default="data">
        <!-- <YregisteredView :params="data.params"></YregisteredView> -->
        <tas-component
          :active="active"
          :panes="panes"
          :panesIndex="1"
          @active="tabsCallback"
        >
          <template>
            <ypscForm
              :disabled="true"
              :params="data.params"
              :nextNodeDbrList="data.nextNodeDbrList"
              :nextNode="data.nextNode"
              ref="form"
              v-show="active == '1'"
            ></ypscForm>
            <YregisteredView
              :params="data.params"
              v-show="active == '2'"
            ></YregisteredView>
          </template>
        </tas-component>
      </template>
      <template #footer> <div></div> </template>
    </year-model>
    
  </div>
</template>

<script>
// 统计
import {
  openMyNdkpJbxx,
  scqueryPageList,
  exportRckpJbxxDatas,
} from "../../api/yearCheck";
import comVxeTable from "@/views/everydayCheck/components/vxe-table/com-vxe-table";
import YearModel from "../../components/yearCheck/year-model.vue";
import { pick } from "../../utils/utils";
import { panes } from "../../common/GroupConfig";
import YregisteredView from "../prview/YregisteredView.vue";
import ypscForm from "@/views/everydayCheck/yearCheck/prview/ypscForm";
import TasComponent from "../prview/tas-component.vue";

export default {
  components: {
    comVxeTable,
    YearModel,
    YregisteredView,
    ypscForm,
    TasComponent,
  },
  name: "dengjiPage",
  props: {
    fywflcode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      columns: [
        {
          type: "checkbox",
        },
        {
          type: "seq",
          title: "序号",
          width: "60",
        },
        {
          field: "fusermc",
          title: "用户名称",
          width: "150",
        },
        {
          field: "fgzdw",
          title: "工作单位",
          width: "150",
        },
        {
          field: "fyear",
          title: "年度",
          width: "150",
        },
        {
          field: "flczt",
          title: "考评完成状态",
          width: "80",
        },
        {
          field: "fndzhkpjg",
          title: "综合考评结果",
          width: "120",
        },
        {
          field: "fzjkssj",
          title: "总结开始时间",
          width: "150",
        },
        {
          field: "fzjjssj",
          title: "总结结束时间",
          width: "150",
        },
        {
          field: "fsftjkh",
          title: "是否提交考核",
          width: "150",
        },

        {
          title: "操作",
          field: "operate",
          width: 200,
          slots: { default: "operate", fixed: "right" },
          fixed: "right"
        },
      ],
      data: [],
      allAlign: null,
      formData: {
        fsxmc: "",
        fqymc: "",
        fslsj: "",
        fjzrq: "",
      },
      fromItem: [
        {
          field: "fyear",
          title: "年度",
          type: "input",
          itemRender: {},
          slots: { default: "name_item" },
        },
        {
          field: "fgzdw",
          title: "工作单位",
          type: "input",
          itemRender: {},
          slots: { default: "name_item" },
        },
        {
          field: "fusermc",
          title: "用户名称",
          type: "input",
          itemRender: {},
          slots: { default: "name_item" },
        },
        {
          field: "flczt",
          title: "考评完成状态",
          type: "comp-selector",
          compType:'Select',
          dictionaryType:'年度考评完成状态',
          separateAreas:'ndkpwczt001',
          itemRender: {},
          slots: { default: "name_item" },
        },
        {
          field: "fndzhkpjg",
          title: "综合考评结果",
          type: "comp-selector",
          compType:'Select',
          dictionaryType:'年度考评评级情况',
          separateAreas:'ndkp-pjqk001',
          itemRender: {},
          slots: { default: "name_item" },
        },
        // {
        //   field: "fzjjssj",
        //   title: "总结开始时间",
        //   type:'datetime',
        //   itemRender: {},
        //   slots: { default: "name_item" },
        // },
        // {
        //   field: "fzjkssj",
        //   title: "总结结束时间",
        //   type:'datetime',
        //   itemRender: {},
        //   slots: { default: "name_item" },
        // },
      ],
      page: scqueryPageList,
      initialize: {
        fywflcode: this.fywflcode,
        fsftjkh: "是",
        onlyCurrentUser: false,
      },
      form: {},
      model: {},
      // 选项卡
      active: "1",
      panes: panes,
    };
  },
  created() {
    
  },
  mounted() {},

  methods: {
    // 编辑
    checkView(row) {
      openMyNdkpJbxx({ ndkpid: row.id })
        .then((res) => {
          if (res.success) {
            //console.log(res);
            this.$refs.model.handler(res.result);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error("未知异常");
        });
    },
    // 下载文件
    download() {
      const { query, selectKeysId } = this.$refs.xTable;
      const formData = new FormData();
      formData.append("fywflcode", this.initialize.fywflcode);
      if (Object.keys(query).length > 0 && selectKeysId.length <= 0) {
        //表单
        for (const key in query) {
          if (Object.hasOwnProperty.call(query, key)) {
            formData.append(`${key}`, query[key]);
          }
        }
        this.dexportRckpJbxxDatas(formData);
      } else if (selectKeysId.length > 0) {
        //表格勾选了
        const strId = selectKeysId.join(",");
        this.dexportRckpJbxxDatas({ ids: strId });
      } else {
        //什么都没有操作，直接下载
      }
    },
    dexportRckpJbxxDatas(data) {
      exportRckpJbxxDatas(data).then((res) => {
        //console.log(res);
        let url = window.URL.createObjectURL(
          new Blob([res], { type: "	application/vnd.ms-excel" })
        );
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "统计.xlsx");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      });
    },
    // 选项卡
    tabsCallback(action) {
      //console.log(action, "action=================================");
      this.active = action;
    },
  },
};
</script>

<style lang="less" scoped>
// @import "../assets/table.less";
@import url("../../assets/table.less");
</style>
